<template>
    <view class="date-filter">
        <view class="filter-title">日期：</view>
        <picker @change="bindPickerStartChange" class="pinker-comp" :fields="pickerType" mode="date" :value="startDateValue" :end="maxDate">
            <view class="filter-value" data-type="0" id="start">
                <view>{{ startDateText }}</view>
            </view>
        </picker>
        <view class="date-split">~</view>
        <picker @change="bindPickerEndChange" class="pinker-comp" :fields="pickerType" mode="date" :value="endDateValue" :end="maxDate">
            <view class="filter-value" data-type="1" id="end">
                <view>{{ endDateText }}</view>
            </view>
        </picker>
    </view>
</template>

<script>
import moment from 'moment';
export default {
    data() {
        return {
            startDateValue: '',
            endDateValue: '',
            startDateText: '',
            endDateText: '',
            maxDate: ''
        };
    },

    props: {
        //选择器的粒度，有效值 year,month,day
        pickerType: {
            type: String,
            default: 'day'
        },
        //两个选择器相隔多少，pickerType是day,就是多少天
        defaultRange: {
            type: Number,
            default: 1
        },
        dateTextFormat: {
            type: String,
            default: 'YYYY-MM'
        },
        overDateTip: {
            type: String,
            default: '起始月份不大于结束月份'
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    watch: {
        startDateValue: function (startDateValue) {
            this.setData({
                startDateText: this.handleDate(startDateValue).format(this.dateTextFormat)
            });
        },
        endDateValue: function (endDateValue) {
            this.setData({
                endDateText: this.handleDate(endDateValue).format(this.dateTextFormat)
            });
        }
    },

    methods: {
        attached() {
            this.initDate();
        },

        handleDate(date) {
            return moment(date);
        },

        initDate() {
            this.setData({
                maxDate: moment().format(this.dateTextFormat),
                startDateValue: moment().subtract(this.defaultRange, `${this.pickerType}s`).format(this.dateTextFormat),
                endDateValue: moment().format(this.dateTextFormat)
            });
        },

        bindPickerStartChange(e) {
            if (this.handleDate(e.detail.value) > this.handleDate(this.endDateValue)) {
                this.setData({
                    startDateValue: this.startDateValue
                });
                uni.showToast({
                    title: this.overDateTip,
                    icon: 'none'
                });
                return;
            }
            this.setData({
                startDateValue: e.detail.value
            });
            this.$emit('dateChange', {
                detail: {
                    startDate: this.startDateValue,
                    endDate: this.endDateValue
                }
            });
        },

        bindPickerEndChange(e) {
            if (this.handleDate(e.detail.value) < this.handleDate(this.startDateValue)) {
                this.setData({
                    endDateValue: this.endDateValue
                });
                uni.showToast({
                    title: this.overDateTip,
                    icon: 'none'
                });
                return;
            }
            this.setData({
                endDateValue: e.detail.value
            });
            this.$emit('dateChange', {
                detail: {
                    startDate: this.startDateValue,
                    endDate: this.endDateValue
                }
            });
        }
    },

    created: function () {}
};
</script>
<style>
.date-filter {
    height: 112rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 16rpx solid #f6f7fa;
}

.date-filter .filter-title {
    margin-right: 32rpx;
}

.date-filter picker {
    flex: 1;
}

.date-filter .date-split {
    padding: 0 10rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4b5680;
    line-height: 40rpx;
}

.date-filter .filter-value {
    flex: 1;
    padding: 12rpx 16rpx;
    background: #f6f7fa;
    border-radius: 8rpx;
    border: 1rpx solid #e1e2e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: 400;
    color: #4b5680;
    line-height: 40rpx;
}
</style>
